﻿@using TelerikedIn.WebApp.Areas.Administration.Models

@{
    ViewBag.Title = "Skills Administration";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewBag.Title</h1>
<div id="error_msg"></div>

@(Html.Kendo()
      .Grid<SkillViewModel>()
      .Name("grid-skills")
      .Columns(columns =>
      {
          columns.Bound(skill => skill.Name);
          columns.Command(command =>
          {
              command.Edit();
              command.Destroy();
          }).Title("Actions");
      })
      .ToolBar(tool =>
      {
          tool.Create();
      })
      .Pageable(page =>
      {
          page.PreviousNext(true);
          page.Numeric(true);
      })
      .Sortable(sort =>
      {
          sort.AllowUnsort(false);
          sort.SortMode(GridSortMode.SingleColumn);
      })
      .DataSource(data =>
      {
          data.Ajax()
              .Model(model => model.Id(s => s.Id))
              .PageSize(10)
              .ServerOperation(true)
              .Events(ev => ev.Error("errorAlert"))
              .Read("TakeSkills", "Skills")
              .Create("CreateSkill", "Skills")
              .Update("UpdateSkill", "Skills")
              .Destroy("DeleteSkill", "Skills");
      }))

<script>
    function errorAlert(e) {
        $("#error_msg").html('<span class="k-icon k-warning"> </span>' + e.errors.Name.errors[0]);
        var grid = $("#grid-skills").data("kendoGrid");
        grid.dataSource.read();
        $("#error_msg").fadeIn(800);
        
        $("#error_msg").fadeOut(800, function () {
            $("#error_msg").fadeIn(800, function () {
                $("#error_msg").fadeOut(800, function () {
                    $("#error_msg").fadeIn(800, function () {
                        $("#error_msg").fadeOut(800, function () {

                        });
                    });
                });
            });
        });
    }
</script>